<template>
    <div>
        <!--模糊查询 -->
        <el-form :inline="true" :model="tuimoneySearch" class="demo-form-inline">
            <el-form-item label="菜名">
                <el-input v-model="tuimoneySearch.dishName" placeholder="用户昵称"></el-input>
            </el-form-item>
            <el-form-item label="退款申请时间">
                <el-date-picker
                        value-format="yyyy-MM-dd HH:mm:ss"
                        v-model="tuimoneySearch.tuiTime"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="primary" @click="chongzhi">重置</el-button>

            </el-form-item>
        </el-form>


        <el-table
                :data="TuiMoneyTableData"
                border
                style="width: 100%"
                :header-cell-style="getRowClass">
            <el-table-column
                    prop="id"
                    label="退款编号"
                    width="50"
            >
            </el-table-column>
            <el-table-column
                    prop="dishName"
                    label="菜名"
                    width="80"
            >
            </el-table-column>
            <el-table-column
                    prop="dishTotalPrice"
                    label="退款价格"
                    width="50"
            >
            </el-table-column>
            <el-table-column
                    prop="usermonicker"
                    label="用户昵称"
                    width="120"
            >
            </el-table-column>
            <el-table-column
                    prop="tuiTime"
                    label="退款申请时间"

            >
            </el-table-column>
            <el-table-column
                    prop="tuiReason"
                    label="退款理由"

            >
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="审核状态"

            >
                <template slot-scope="scope" >
                    <el-button type="primary" size="medium" v-if="scope.row.status==0" >审核中</el-button>
                    <el-button type="success" size="medium" v-if="scope.row.status==1" >申请通过</el-button>
                    <el-button type="danger" size="medium" v-if="scope.row.status==2" >申请驳回</el-button>
                </template>
            </el-table-column>

            <el-table-column
                    prop="tuiChecktime"
                    label="审核时间"

            >
            </el-table-column>
            <el-table-column
                    prop="refuseReason"
                    label="驳回理由"
            >
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="250"

            >
                <template slot-scope="scope" style="width: 200px">
                    <el-button type="success"  @click="pass(scope.row)" v-if="scope.row.status==0 " size="medium">审核通过</el-button>
                    <el-button type="danger"  @click="back(scope.row.id)" v-if="scope.row.status==0 " size="medium">审核驳回</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页组件 -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <!--驳回弹出表单-->
        <el-dialog
                title="驳回理由"
                :visible.sync="reasonDialogVisible"
                width="40%"
        >
            <el-form ref="backRules" :model="reasonForm" label-width="80px" class="back_form">
                <el-form-item label="驳回理由" >
                    <el-input type="text" v-model="reasonForm.refuseReason"  onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></el-input>
                </el-form-item>
                <el-form-item>
                    <template slot-scope="scope" >
                        <el-button type="primary" @click="backreason" >提交</el-button>
                        <el-button type="primary" @click="reasonDialogVisible=false" >取消</el-button>
                    </template>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "Ordercheck",
        data(){
            return{
                //当前显示的页码变量
                currentPage:1,
                pageSizes:[5,10,15],
                pageSize:5,
                //总条数
                total:0,

                //模糊查询表单
                tuimoneySearch:{},
                //退款审核表格
                TuiMoneyTableData:[],
                //拒绝退款理由弹出框
                reasonDialogVisible:false,
                //拒绝退款理由表单
                reasonForm:{},
                //当前行id
                id:"",
                //驳回表单校验规则
                backRules: {
                    refuseReason: [
                        {required: true, message: "请输入驳回理由", trigger: "blur"}
                    ]
                },
            }
        },
        created() {
            this.selectTui();
        },
        methods:{
            //审核通过按钮
            pass(row) {
                var id=row.id
                this.$http.post("/tui/tui/pass?id="+id).then(result=> {
                    this.selectTui();
                })
                this.$http.post("/tui/tui/return",row).then(result=> {
                    this.selectTui();
                })
            },

            //重置按钮功能
            chongzhi(){
                this.tuimoneySearch={};
                this.selectTui();
            },
            //查询按钮功能
            onSubmit(){
                this.selectTui();
            },

            //每页显示的条数大小改变时触发的方法
            handleSizeChange(val) {
                this.pageSize=val;
                this.selectTui();
            },
            //页码改变时触发的方法
            handleCurrentChange(val) {
                this.currentPage=val;
                this.selectTui();
            },

            // 表头样式
            getRowClass() {
                return "background:#4841C1; color:#fff;";
            },
            //查询申请订单
            selectTui(){
                var token=sessionStorage.getItem("token");
                this.$http.post("/tui/tui/tuimoney?currentPage="+this.currentPage+"&pageSize="+this.pageSize+"&token="+token,this.tuimoneySearch).then(result=>{
                    if (result.data.code===2000){
                        this.TuiMoneyTableData=result.data.data.records;
                        this.total = result.data.data.total;

                    }
                })
            },


            //审核驳回按钮弹出表单
            back(id){
                this.reasonDialogVisible=true;
                this.id=id;
            },

            //审核驳回弹出层确认按钮
            backreason(){
                this.reasonDialogVisible=false;
                this.$http.post("/tui/tui/bohui?id="+this.id,this.reasonForm).then(result=> {
                    console.log("aaaaa")
                    console.log(result)
                    this.selectTui();
                })
            }

        }
    }
</script>

<style scoped>

</style>